﻿<!DOCTYPE html>
<html lang="cn" class="no-js">
	<head>
		<meta charset="utf-8">
		<title>测试</title>
		<meta name="description" content="">

        
       	<meta name="author" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <!-- #CSS Links -->
        <link rel="stylesheet" href="loader.css">
		<!-- Basic Styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="bootstrap.min.css">
        
       <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
       <script type="text/javascript">         
            $(window).load(function() {
                $("#loading-center").click(function() {
                $("#loading").fadeOut(500);
                })
            });
        </script>
        <style>
            #loading{
                background-color: #bd4932;
                height: 100%;
                width: 100%;
                position: fixed;
                z-index: 1;
                margin-top: 0px;
                top: 0px;
            }
            #loading-center{
                width: 100%;
                height: 100%;
                position: relative;
            }
            #loading-center-absolute {
                position: absolute;
                left: 50%;
                top: 50%;
                height: 200px;
                width: 200px;
                margin-top: -100px;
                margin-left: -100px;
            }
            #object{
                width: 80px;
                height: 80px;
                background-color: #FFF;
                -webkit-animation: animate 1s infinite ease-in-out;
                animation: animate 1s infinite ease-in-out;
                margin-right: auto;
                margin-left: auto;
                margin-top: 60px;
            }
            @-webkit-keyframes animate {
                0% { -webkit-transform: perspective(160px); }
                50% { -webkit-transform: perspective(160px) rotateY(-180deg); }
                100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); }
            }

            @keyframes animate {
                0% { 
                    transform: perspective(160px) rotateX(0deg) rotateY(0deg);
                    -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); 
                } 50% { 
                    transform: perspective(160px) rotateX(-180deg) rotateY(0deg);
                    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg) ;
                } 100% { 
                    transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
                    -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg);
                }
            }
        </style>
	</head>
	

	<body>
        
        <div id="loading">
            <div id="loading-center">
                <div id="loading-center-absolute">
                <div id="object"></div>
                </div>
            </div>
        </div>
		<!-- ui-view container -->


		<!--[if lt IE 7]>
			<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
		<![endif]-->

		<!--[if lt IE 9]>
			<script src="plugin/es5-shim/es5-shim.js"></script>
			<script src="plugin/json3/lib/json3.min.js"></script>
		<![endif]-->
            <a href="http://www.ibloger.net/assets/demos/css3-page-preload-30-animations/index.html" target="_blank">
                <h1>DEMO </h1>
            </a>
      

     </body>
</html>
